import React from 'react';
import { nanoid } from 'nanoid';
import "./App.css";
//导入顶部组件
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
//导入 css 文件
export default class App extends React.Component {
    //todolist 数据
    state = {
        todos: [
            {id:1, title: '写作业', done: false}, // done 完成   true 已完成  false 未完成
            {id:2, title: '买彩票', done: false},
            {id:3, title: '五黑', done: true},
            {id:'12fafafaefa', title: '买彩票', done: true}
        ]
    }

    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <Main todos={this.state.todos} checkTodo={this.checkTodo} removeTodo={this.removeTodo}/>
                    <Footer 
                        todos={this.state.todos}  
                        checkAllTodo={this.checkAllTodo} 
                        removeAllCompTodo={this.removeAllCompTodo} 
                    />
                </div>
            </div>
        );
    }

    //声明方法新增任务  一定要使用箭头函数
    addTodo = (title) => {
        let id = nanoid();
        //创建一个新的对象
        let newTodo = {id, title, done:false};
        //更新 state 中 todos 的值
        this.setState({
            todos: [
                ...this.state.todos,
                newTodo
            ]
        })
    }

    //声明方法, 用来修改任务的完成状态  this.checkTodo(1, true)  this.checkTodo(3, false)
    checkTodo = (id, status) => {
        //map 方法
        let todos = this.state.todos.map(item => {
            if(item.id === id){
                item.done = status;
            }
            return item;
        });
        //遍历改变原数组, 不用生成新数组, 资源占用较少
        // let {todos} = this.state
        // for(let i = 0;i<todos.length;i++){
        //     if(id === todos.id){
        //         todos[i].done = status;
        //     }
        // }
        //设置
        this.setState({
            todos: todos
        })
    }

    //声明方法, 删除任务  removeTodo(3);
    removeTodo = id => {
        //过滤
        let newTodos = this.state.todos.filter(item => item.id !== id);
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //批量操作  全部完成 checkAllTodo(true)   全部没有完成 checkAllTodo(false)
    checkAllTodo = (status) => {
        let newTodos = this.state.todos.map(item => {
            //修改每一个 item 任务的状态为 status 的值
            item.done = status;
            //返回
            return item;
        });
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //声明方法 完成批量删除已完成的任务
    removeAllCompTodo = () => {
        //数据筛选
        // let newTodos = this.state.todos.filter(item => item.done === false);
        let newTodos = this.state.todos.filter(item => !item.done);
        //设置
        this.setState({
            todos: newTodos
        })
    }

}